<template>
  <header :class="bgStyle">
    <div class="limit flex">
      <!-- logo -->
      <div class="logo">
        <img :src="logo">
      </div>
      <!-- 选项列表 -->
      <ul class="lists headerList flex1">
        <ListItem v-for="list in lists" :label="list.label" :event="list.click"></ListItem>
      </ul>
    </div>
  </header>
</template>
<style lang="less">
  header {
    height: 90px;
    width: 100%;
    padding: 15px 0;
    position: absolute;
    z-index: 5;
    .limit {
      max-width: 1200px;
      height: 100%;
      margin: 0 auto;
    }
    .logo {
      display: inline-block;
    }
    .lists {
      padding: 0;
      display: flex;
      .selecter {
        color: #267cc1;
      }
    }
    .muListItem {
      display: inline-block;
      flex: 1;
      border-bottom: 0;
      text-align: center;
      cursor: pointer;
      color: white;
      line-height: 62px;
      height: 62px;
    }
  }

  .hx-bg {
    background: #353035;
    position: relative;
  }

  .selected {
    color: #267cc1 !important;
  }

  @media screen and (max-width: 900px) {
    header {
      padding: 0;
      height: 85px;
      .logo img {
        width: 70px;
        position: relative;
        top: 12px;
        left: 6px;
      }
    }
  }

</style>

<script>
  import router from '../router'
  import $ from 'jQuery'
  import logo from '../images/logo.png'
  import listItem from '../muka/mu-vue/List/ListItem'
  // import MaskLayer from '../muka/mu-vue/Mask/MaskLayer'
  import Login from '../resources/Login'
  export default {
    name: "hx-header",
    components: {
      'ListItem': listItem,
      'Login': Login
    },
    mounted: function () {
      let _this = this;
      if (this.$route.path !== '/') {
        _this.bgStyle['hx-bg'] = true
      }
      let node = $('.headerList').children('li')
      node.on('click', function (e) {
        if ($(this).index() === 0) {
          _this.bgStyle['hx-bg'] = false
        } else {
          _this.bgStyle['hx-bg'] = true
        }
        node.each(function () {
          $(this).removeClass('selected');
        })
        $(this).addClass('selected')
      })
    },
    data: () => {
      return {
        bgStyle: {
          'hx-bg': this.bg
        },
        logo: logo,
        // 导航条内容
        lists: [{
            label: '首页',
            click: function () {
              router.push('/')
            }
          }, {
            label: '产品展示',
            click: function () {
              router.push('reveal')
            }
          }, {
            label: '服务项目',
            click: function () {
              router.push('service')
              //router.push('project')
            }
          }
          /*, {
                    label: '咨询',
                    click: function () {
                      router.push('consult')
                    }
                  }, {
                    label: '登录'
                  }*/
        ]
      }
    },
    props: {
      bg: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      noop: function () {}
    }
  }

</script>
